<template>
  <div class="monitoring">
        <div class="li">
          <div class="li-img-1"></div>
          <div class="li-info">
            环境监测
          </div>
        </div>
        <div class="li">
          <div class="li-img-2"></div>
          <div class="li-info">
            塔吊监测
          </div>
        </div>
        <div class="li">
          <div class="li-img-3"></div>
          <div class="li-info">
            人员管理
          </div>
        </div>
        <div class="li">
          <div class="li-img-4"></div>
          <div class="li-info">
            安全帽抓拍
          </div>
        </div>
  </div>
</template>

<script>
export default {
  name: 'intelligent-monitoring',
  methods: {
    handleChange (index) {

    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .monitoring{
    .li{
      height:2.347rem;
      width: 2.08rem;
      float: left;
      margin-left: 0.12rem;
    }
  }
  .li-info{
    font-size: 0.34rem;
    color: #141418;
    font-family:'苹方';
    text-align: center;
    margin-top: 0.2rem;
  }
  .li-img-1{
    background: url("../../assets/mobile/huanjin.png") no-repeat  ;
    background-size:contain;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: auto;
    margin-right: auto;
  }
  .li-img-2{
    background: url("../../assets/mobile/tadiaojiance.png") no-repeat  ;
    background-size:contain;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: auto;
    margin-right: auto;
  }
  .li-img-3{
    background: url("../../assets/mobile/renyuan.png") no-repeat  ;
    background-size:contain;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: auto;
    margin-right: auto;
  }
  .li-img-4{
    background: url("../../assets/mobile/anquanmao.png") no-repeat  ;
    background-size:contain;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: auto;
    margin-right: auto;
  }
</style>
